<!DOCTYPE html>
<style>
div { overflow: hidden; margin-left: 100px }
table { border-spacing: 0; width: 200px; height: 200px }
tr { will-change: transform }
tr:nth-child(1) { background: green }
tr:nth-child(2) { background: blue }
tr:nth-child(3) { background: magenta }
tr:nth-child(4) { background: maroon }
</style>
<div style="margin-top: 100px">
  <table>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
  </table>
</div>
<div style="margin-top: 20px; width: 100px; height: 100px">
  <table>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
  </table>
</div>
<div id="scrolled" style="margin-top: 20px; width: 100px; height: 100px">
  <table>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
  </table>
</div>
<script>
scrolled.scrollTop = 100;
scrolled.scrollLeft = 100;
</script>